<template>
  <div class="home">
    <p>当前vuex中直接获取state => {{ globMsg }}</p>
    <p>当前vuex中通过getters获取state => {{ myGlobMsg }}</p>
    <p>当前vuex中通过变量获取state => {{ count }}</p>
    <el-button @click="add">增加</el-button>
    <el-button @click="decrement">减少</el-button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'home',
  computed: {
    ...mapState('example', ['globMsg']),
    ...mapGetters('example', ['myGlobMsg']),
    count() {
      return this.$store.state.example.globMsg
    }
  },
  methods: {
    ...mapMutations('example', ['ADD_MSG', 'DECREMENT_MSG']),
    ...mapActions('example', ['addMsg', 'decrementMsg']),
    add() {
      // 通过mutations 获取add方法
      // 派发add方法
      this.$store.commit('example/ADD_MSG')
    },
    decrement() {
      // 统建actions 获取myDecrement
      // 间接派发decrement方法
      // 也可直接调用
      this.decrementMsg()
    }
  }
}
</script>
